<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/common/taglibs.jsp" %>
<%@ taglib prefix="vtc" uri="/ls-trade-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/hpp_c1_c2.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<%@ include file="/common/meta.jsp" %>
<title>VTC - Holistic Programme Planning - HPP</title>
<%@ include file="/common/css_js.jsp"%>

<script type="text/javascript">
	var validation;
	
	$(document).ready(function() {
		validation=$("#mainForm").validate();
		
		var planYear= parseInt($("#planningExercise").val());
		var toYearStr = getToYear(planYear);
		$("#planningExercisePlus").val(toYearStr);
		$("#planningExercise").keyup(function(){
			var planYear= parseInt(this.value);
			toYearStr = getToYear(planYear);
			$("#planningExercisePlus").val(toYearStr);
		});
	});

	function getToYear(year) {
		if(year!=null && year!='' && year!=0 && year.toString().length == 4){
			var toYear = year + 1;
			var toYearStr = toYear.toString().substring(2,4);
			return toYearStr;
		} else {
			return "";
		}
	}
	
	function clickBtn(action){
		var code="<s:property value='code'/>";
		var programmeId="<s:property value='programmeId'/>";
		
		switch(action){
			case "save":
				var exercise = document.getElementById("planningExercise").value;
				//alert(exercise);
				$.ajax({
					url : "programme-subject-group!ajaxValidateSubject.action?code="+code + "&subjectGroup.planningExercise="+exercise+"&subjectGroup.id=<s:property value='subjectGroup.id'/>",
					cache : true,
					dataType : "text",
					async : false,
					success : function(data) {
						//alert(data);
						if(data=="false"){
							var codes = document.getElementsByName("receiverCodes");
							var hasCheck = false;
							for(i=0; i<codes.length;i++){
								if(codes[i].checked==true){
									hasCheck=true;
									break;
								}
							}
							if(!hasCheck){
								document.getElementById("errorMsgSpan").innerHTML = "Please select at least one code!";
							}
							if(validation.form()){
								$("#mainForm").attr("action","programme-subject-group!save.action");
								$("#mainForm").attr("target","_parent");
								$("#mainForm").submit();
								CE.close();
							}
						}else{
							document.getElementById("errorMsgSpan").innerHTML = "This planning exercise has already existed, please input again!";
						}
					},
					error : function(data) {
						//alert(data);
					}
				});
				
				return;
				
			case "search":
				
				$("#mainForm").attr("action","programme-subject-group!input.action?no-decorate");
				$("#mainForm").submit();
				
				return;		
				
			case "clear":
				$("#searchCode").val(null);
				$("#mainForm").attr("action","programme-subject-group!input.action?no-decorate");
				$("#mainForm").submit();
				
				return;					
		}			
			
	}
	
</script> 

</head>
<body>
<div class="bodyBlank">

 <s:form id="mainForm" name="mainForm" action="programme-subject-group!input.action?no-decorate" method="post">
  
  <s:hidden name="subjectGroup.id"></s:hidden>
  
  <s:hidden name="programmeId"></s:hidden>
  <s:hidden name="code"></s:hidden>
        

  <div class="padding">
    <div class="bodyBlank2">
      <div class="pageTitle">Select Programme</div>
      <div class="pageTitle2">Search Programme</div>
      <div class="form1">
      
        <table cellspacing="0" cellpadding="0" border="0">
          <tbody><tr>
            <td class="sep"><img style="width:140px;" src="../images/spacer.gif"></td>
            <td class="sep"><img style="width:170px;" src="../images/spacer.gif"></td>
            <td class="sep"><img style="width:130px;" src="../images/spacer.gif"></td>
            <td class="sep sep2"><img src="../images/spacer.gif"></td>
          </tr>
          <tr>
            <td class="fLabel">Programme Code </td>
            <td class="fField">
            	<s:textfield name="searchCode" id="searchCode" cssStyle="width:140px" cssClass="inputText"/>
            <td class="fLabel">&nbsp;</td>
            <td class="fField">&nbsp;</td>
          </tr>
        </tbody></table>
        <div class="btnSet btnSetTypeB">
          <div class="left">
            <div class="button sbtn">
              <div class="left">
                <div class="right">
                  <input type="button" onclick="clickBtn('search')" value="Search" name="" id="" class="inputButton">
                </div>
              </div>
            </div>
            <div class="button sbtn">
              <div class="left">
                <div class="right">
                  <input type="button" onclick="clickBtn('clear')" value="Clear" name="" id="" class="inputButton">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- InstanceBeginEditable name="content" -->
      <div class="sListBorder">
        <div class="form4">
          <table cellspacing="0" cellpadding="0" border="0">
            <tbody><tr>
              <td class="sep"><img style="width:140px;" src="../images/spacer.gif"></td>
              <td class="sep sep2"><img src="../images/spacer.gif"></td>
            </tr>
            <tr>
              <td class="fLabel">Planning Exercise </td>
              <td class="fField">
              	<s:textfield name="subjectGroup.planningExercise" id="planningExercise" cssStyle="width:40px" cssClass="inputText required  number"></s:textfield>
                /
                <input type="text" style="width:40px" value="" name="" id="planningExercisePlus" class="inputText" disabled="disabled">
                <span class="errorLabel" id="errorMsgSpan"></span>
                </td>
            
            </tr>
          </tbody></table>
        </div>
        
        <s:if test="%{page!=null&&page.result!=null&&page.result.size()!=0}">   
        
	        <div class="sList">
	          <table width="100%" cellspacing="0" cellpadding="0" border="0" class="sTable">
	            <tbody>
	             <tr>
	              <td class="sTh checkbox"><input type="checkbox" name="" id="" class="inputCheckbox"></td>
	              <td class="sTh">Programme Code <img src="../images/sort_down.gif"></td>
	            </tr>
	         
				      <s:iterator value="page.result" var="programmeCode" status="st">
				       
				      	  <s:set var="trClass" value="'sRow1'"></s:set>
				    	  <s:if test="#st.index%2==0">
				       	 	 <s:set var="trClass" value="'sRow2'"></s:set>
						  </s:if>
					      <s:else>
				       	     <s:set var="trClass" value="'sRow1'"></s:set>
				       	  </s:else>
						  
					      <tr class="<s:property value='#trClass'/>">     
			              	<td class="sCell"><input type="checkbox" name="receiverCodes" id="receiverCodes" value="<s:property value='#programmeCode.code'/>" class="inputCheckbox"></td>
			              	<td class="sCell"><s:property value="#programmeCode.code"/> </td>
			           	  </tr>
			           	  
			           </s:iterator> 
		         
	           	  
	          	 </tbody>
	         </table>
	        </div>
	        
	        <vtc:paging page="%{page}"></vtc:paging>
	        
	        <div class="btnSet btnSetTypeB">
	          <div class="left">
	            <div class="button">
	              <div class="left">
	                <div class="right">
	                  <input type="button" onclick="clickBtn('save')" value="Select" name="" id="" class="inputButton">
	                </div>
	              </div>
	            </div>
	            <div class="button">
	              <div class="left">
	                <div class="right">
	                  <input type="button" onclick="CE.close()" value="Cancel" name="" id="" class="inputButton">
	                </div>
	              </div>
	            </div>
	          </div>
	        </div>
        
        </s:if>
      </div>
      <!-- InstanceEndEditable --> </div>
  </div>
  
  </s:form>
</div>
   
</body>
</html>   